<template>
    
    <el-form ref="login" :model="user" :rules="rules" id="loginForm" style="width:350px;">

            <h2>用户登陆</h2>

        <el-form-item prop="userName">
            <el-input type="text" v-model="user.userName" placeholder="请输入用户名" autocomplete="off" required=true></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
            <el-input  type="password" v-model="user.pwd" placeholder="请输入密码" autocomplete="off" required=true></el-input>
        </el-form-item >
        <el-form-item prop="code">
            <el-input type="text" v-model="user.code" placeholder="请输入验证码" style="width:250px;margin-right:5px"></el-input>
          <img :src="kapatch" title="点击换一换" @click="replace" style="display:flex;"/>
         </el-form-item>
        
        <el-form-item>
        
            <el-button type="primary" @click="submitForm" style="width:100%;">提交</el-button>
           
        </el-form-item>
    </el-form>
</template>
<script>
  export default {
    name:'Login',
    data(){
        return {
            kapatch:'/verification?t='+new Date(),
           // kapatch:'',
            user:{
                userName:'',
                pwd:'',
                code: ''
            },
            rules:{
                pwd:[{required:true,message:'请输入密码',trigger:'blur'}],
                userName:[{required:true,message:'请输入用户名',trigger:'blur'}],
                code:[{required:true,message:'请输入验证码',trigger:'blur'}]
            }
        }

    },
    methods:{
        submitForm(){
            this.$refs.login.validate((valid) => {
          if (valid) {
            this.postRequest('/login',this.user).then(response=>{

                if(response.success){
                    window.sessionStorage.setItem("userId",response.result.userId);
                    window.sessionStorage.setItem("token",response.result.token);
                    window.sessionStorage.setItem("permissions",response.result.permissions)
                    let path = this.$route.query.redirect;
                    this.$router.replace((path=="/" || path==undefined)?"/home":path)
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        },
        replace(){
          this.kapatch='/verification?t='+new Date();
        }

    }
  }
</script>
<style>
#loginForm{
    background-origin: padding-box;
    margin: 88px auto;
    border:1px solid #eeaeee;
    border-radius: 10px;
    box-shadow: 2px 2px 5px  gray;
    padding: 20px 20px;
    background-color: #fff;
}
.el-form-item__content{
    display: flex;
    align-items: center;
    align-content: center;

}
</style>
